<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态布局 - jQuery Draggable</title>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 jQuery UI -->
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
    <!-- 引入 jQuery UI 的 CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #layout-container {
            width: 800px;
            height: 600px;
            border: 2px solid #ccc;
            position: relative;
            background-color: #f9f9f9;
        }
        .draggable-item {
            width: 100px;
            height: 100px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: move;
            position: absolute;
        }
        #add-item, #save-layout {
            padding: 10px 20px;
            margin-top: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #add-item:hover, #save-layout:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div id="layout-container">
        <div class="draggable-item">元素 1</div>
    </div>
    <button id="add-item">添加元素</button>
    <button id="save-layout">保存布局</button>

    <script>
        $(document).ready(function () {
            // 初始化拖拽功能
            function initDraggable() {
                $(".draggable-item").draggable({
                    containment: "#layout-container", // 限制拖拽范围
                    cursor: "move",
                    stop: function (event, ui) {

                        console.log("ui,event",ui,event);
                        // 保存元素位置到本地存储
                        const id = $(this).attr("id") || `item-${Date.now()}`;
                        $(this).attr("id", id);
                        const position = ui.position;
                        localStorage.setItem(id, JSON.stringify(position));
                    }
                });
            }

            // 添加元素
            $("#add-item").click(function () {
                const newItem = $('<div class="draggable-item">新元素</div>');
                $("#layout-container").append(newItem);
                initDraggable(); // 初始化新元素的拖拽功能
            });

            // 保存布局
            $("#save-layout").click(function () {
                const layoutData = [];
                $(".draggable-item").each(function () {
                    const id = $(this).attr("id");
                    const position = $(this).position();
                    layoutData.push({ id, position });
                });
                console.log("布局数据：", layoutData); // 打印布局数据到控制台
                alert('布局已保存，查看控制台输出');
            });

            // 恢复布局
            function restoreLayout() {
                $(".draggable-item").each(function () {
                    const id = $(this).attr("id");
                    const position = JSON.parse(localStorage.getItem(id));
                    if (position) {
                        $(this).css({
                            left: position.left,
                            top: position.top
                        });
                    }
                });
            }

            // 初始化
            initDraggable();
            restoreLayout();
        });
    </script>
</body>
</html>